<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:set var="ok" value="%{getText(\"button.ok\")}" />
<link href="${pageContext.request.contextPath}/css/jquery-ui-combobox.custom.css" rel="stylesheet"
  type="text/css" />
<script type="text/javascript">
  $(function() {
    $('#customerMsg').tooltip({
      tooltipClass : "ui-state-highlight"
    });
    $("#dialog-form").dialog({
      height : 540,
      width : 800,
      modal : true,
      buttons : {
        '<s:property value="#ok" />' : function() {
          $(this).dialog("destroy");
        }
      },
      close : function() {
        $(this).dialog("destroy");
      }
    });
    $("#customerAccordion").multipleaccordion();
    $('#customerAccordion > div > table td.LABEL').css({
      'width' : '95px'
    });
    $('#streetSpan').addClass('wrap');
  });
</script>
<div id="dialog-form" title='<s:property value="getText('title.view.customer')"/>'>
  <div id="customerMsg"></div>
  <div id="customerAccordion">
    <h3>
      <s:property value="getText('title.customer.details')" />
    </h3>
    <div>
      <table>
        <tr>
          <td class="LABEL"><input type="hidden" id="version" name="customer.version"
            value="<s:property value="%{customer.version}" />" /> <input type="hidden" id="id"
            name="customer.id" value='<s:property value="%{#parameters[\"customer.id\"]}" />' /> <label
            for="firstname"><s:property value="getText('field.contact.name')" /></label></td>
          <td><span><s:property value="%{customer.firstname}" /></span> <span><s:property
                value="%{customer.lastname}" /></span></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="alias"><s:property
                value="getText('field.customer.alias')" /></label>
          <td><span><s:property value="%{customer.alias}" /></span></td>
        </tr>
      </table>
    </div>
    <h3>
      <s:property value="getText('title.contact.information')" />
    </h3>
    <div>
      <table>
        <tr>
          <td class="LABEL"><label for="phone"><s:property
                value="getText('field.phone')" /></label></td>
          <td><span><s:property value="%{customer.phone}" /></span></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="mobile"><s:property
                value="getText('field.mobile')" /></label></td>
          <td><span><s:property value="%{customer.mobile}" /></span></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="fax"><s:property
                value="getText('field.fax')" /></label></td>
          <td><span><s:property value="%{customer.fax}" /></span></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="email"><s:property
                value="getText('field.email')" /></label></td>
          <td><span><s:property value="%{customer.email}" /></span></td>
        </tr>
      </table>
    </div>
    <h3>
      <s:property value="getText('title.address')" />
    </h3>
    <div>
      <table>
        <tr>
          <td class="LABEL"><label for="street"><s:property
                value="getText('field.street')" /></label></td>
          <td><span id="streetSpan"><s:property value="%{customer.street}" /></span></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="postalCode"><s:property
                value="getText('field.postalCode')" /></label></td>
          <td><span><s:property value="%{customer.postalCode}" /></span></td>
        </tr>
        <tr>
          <td><label for="region"><s:property value="getText('field.region')" /></label></td>
          <td><span><s:property value="%{customer.region.name}" /></span></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="city"><s:property
                value="getText('field.city')" /></label></td>
          <td><span><s:property value="%{customer.city.name}" /></span></td>
        </tr>
      </table>
    </div>
  </div>
</div>